<!--
Props:
  @prop  url        String   照片加载地址
  @prop  uploadUrl  String   照片上传的地址
  @prop  photoType  String   照片类型
  @prop  data       Object   上传的数据{taskBridgeId:"", ****Path:""}
events:
  @event onSuccess  response 上传成功的事件
-->
<template>
  <div style="display: inline-block;margin-right: 16px">
    <div v-if="!!filePath" class="photo-list">
      <template>
        <img :src="thumbnailUrlWithParam" alt="无">
        <div class="photo-list-cover">
          <Icon type="ios-eye-outline" @click.native="handleView"></Icon>
          <Icon v-if="canDelete" type="ios-trash-outline" @click.native="handleRemove"></Icon>
        </div>
      </template>
    </div>
    <!--上传时的进度条-->
    <div v-if="isUploading" class="photo-list">
      <Progress :percent="percentage" hide-info></Progress>
    </div>
    <!--上传按钮-->
    <Upload
      v-if="!filePath && !isUploading"
      ref="upload"
      :data="uploadData"
      :show-upload-list="false"
      :action="uploadUrl"
      :on-success="handleSuccess"
      :on-progress="handleProgress"
      :format="['jpg', 'jpeg', 'png']"
      accept="image/*"
      :max-size="2048"
      :on-format-error="handleFormatError"
      :on-exceeded-size="handleExceededSize"
      :beforeUpload="handleBeforeUpload"
      type="drag"
      style="display:inline-block;width: 58px;">
      <!--上传的按钮-->
      <div style="width: 58px;height: 58px; line-height: 58px">
        <a href="javascript:void(0)"><span>{{name}}</span></a>
      </div>
    </Upload>
  </div>
</template>

<script>
  import {getAuthorizedFunction, hasAuthorizedFunction} from "../../assets/js/global";
  import {DELETE, MANAGE} from "../../assets/js/enum/FunctionType";
  import {FRONT, SIDE, UPWARD} from "../../assets/js/enum/PhotoType";
  import {appendRequestParam} from "../../assets/js/utils/RequestUtils";

  export default {
    name:"BridgePhoto",
    props:{
      photoUrl:{
        type:String,
        required:true
      },
      thumbnailUrl:{
        type:String,
        required:true
      },
      uploadUrl:{
        type:String,
        required:true
      },
      photoType:{
        type:String,
        required:true
      },
      data:{
        type:Object,
        default() {
          return {
            taskBridgeId: ""
          }
        }
      }
    },
    data() {
      return {
        isUploading:false,
        percentage:0
      }
    },
    computed: {
      uploadData() {
        //返回新的对象
        let tokenId = localStorage.getItem("tokenId");
        let menuFunctionId = getAuthorizedFunction(this, MANAGE);
        let newData = {id:this.data.id, taskBridgeId:this.data.taskBridgeId, tokenId, menuFunctionId, photoType:this.photoType};
        //去除几个转换后台对象出错的属性
        delete newData.buildDate;
        delete newData.createDate;
        delete newData.deleteDate;
        delete newData.bridgeSideList;
        return newData;
      },
      name() {
        switch(this.photoType) {
          case FRONT:
            return "正";
          case SIDE:
            return "侧";
          case UPWARD:
            return "仰";
          default:
            return "未知"
        }
      },
      filePath() {
        switch (this.photoType) {
          case FRONT:
            return this.data.frontPath;
          case SIDE:
            return this.data.sidePath;
          case UPWARD:
            return this.data.upwardPath;
        }
        return "";
      },
      thumbnailUrlWithParam() {
        let uri = appendRequestParam(this.thumbnailUrl, "tokenId", localStorage.getItem("tokenId"));
        return appendRequestParam(uri, "path", this.filePath);
      },
      canDelete() {
        return hasAuthorizedFunction(this, DELETE);
      }
    },
    methods: {
      handleView() {
        let uri = appendRequestParam(this.photoUrl, "tokenId", localStorage.getItem("tokenId"));
        this.$emit("onView", appendRequestParam(uri, "path", this.filePath));
      },
      handleRemove() {
        this.$emit("onRemove", this.data, this.photoType);
      },
      handleSuccess(response) {
        this.isUploading = false;
        this.$emit("onSuccess", response, this.data, this.photoType);
      },
      handleFormatError(file) {
        this.$alert("文件格式不正确, 请上传jpg或png格式的照片", "提示");
        this.isUploading = false;
      },
      handleExceededSize(file) {
        this.$alert("文件"+file.name+"太大，上传的照片不能超过2M", "提示");
        this.isUploading = false;
      },
      handleBeforeUpload() {
        this.isUploading = true;
        this.percentage = 0;
      },
      handleProgress(event) {
        this.percentage = event.percent;
      }
    }
  }
</script>

<style scoped>
  .photo-list {
    display: inline-block;
    width:60px;
    height:60px;
    text-align: center;
    line-height:60px;
    border:1px solid transparent;
    border-radius:4px;
    overflow: hidden;
    background: #fff;
    position: relative;
    box-shadow: 0 1px 1px rgba(0, 0, 0, .2);
    margin-right:4px;
  }
  .photo-list img {
    width: 100%;
    height: 100%;
  }
  .photo-list-cover {
    display: none;
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    background: rgba(0, 0, 0, .6);
  }
  .photo-list:hover .photo-list-cover {
    display: block;
  }
  .photo-list-cover i {
    color: #fff;
    font-size: 20px;
    cursor: pointer;
    margin: 0 2px;
  }
</style>



// WEBPACK FOOTER //
// BridgePhoto.vue?5452356a
